
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Awesome go-echarts</title>
    <script src="http://127.0.0.1:8083/assets/echarts.min.js"></script>
    <script src="http://127.0.0.1:8083/assets/maps/china.js"></script>
    <script src="http://127.0.0.1:8083/assets/maps/guangdong.js"></script>
    <script src="http://127.0.0.1:8083/assets/maps/guang3_dong1_shan4_tou2.js"></script>
    <script src="https://go-echarts.github.io/go-echarts-assets/assets/echarts.min.js"></script>
    <script src="https://go-echarts.github.io/go-echarts-assets/assets/maps/china.js"></script>
    <script src="https://go-echarts.github.io/go-echarts-assets/assets/themes/macarons.js"></script>
    <link href="http://127.0.0.1:8083/assets/bulma.min.css" rel="stylesheet">
    <link href="https://go-echarts.github.io/go-echarts-assets/assets/bulma.min.css" rel="stylesheet">
</head>

<body>
<div class="select" style="margin-right:10px; margin-top:10px; position:fixed; right:10px;">
    <select onchange="window.location.href=this.options[this.selectedIndex].value">
        <option value="http://127.0.0.1:8080/map">Map-(地图)</option>
        <option value="http://127.0.0.1:8080/bar3D">Bar3D-(3D 柱状图)</option>
        <option value="http://127.0.0.1:8080/boxPlot">BoxPlot-(箱线图)</option>
        <option value="http://127.0.0.1:8080/effectScatter">EffectScatter-(动态散点图)</option>
        <option value="http://127.0.0.1:8080/funnel">Funnel-(漏斗图)</option>
        <option value="http://127.0.0.1:8080/gauge">Gauge-仪表盘</option>
        <option value="http://127.0.0.1:8080/geo">Geo-地理坐标系</option>
        <option value="http://127.0.0.1:8080/graph">Graph-关系图</option>
        <option value="http://127.0.0.1:8080/heatMap">HeatMap-热力图</option>
        <option value="http://127.0.0.1:8080/kline">Kline-K 线图</option>
        <option value="http://127.0.0.1:8080/line">Line-(折线图)</option>
        <option value="http://127.0.0.1:8080/line3D">Line3D-(3D 折线图)</option>
        <option value="http://127.0.0.1:8080/liquid">Liquid-(水球图)</option>
        <option value="http://127.0.0.1:8080/bar">Bar-(柱状图)</option>
        <option value="http://127.0.0.1:8080/overlap">Overlap-(重叠图)</option>
        <option value="http://127.0.0.1:8080/parallel">Parallel-(平行坐标系)</option>
        <option value="http://127.0.0.1:8080/pie">Pie-(饼图)</option>
        <option value="http://127.0.0.1:8080/radar">Radar-(雷达图)</option>
        <option value="http://127.0.0.1:8080/sankey">Sankey-(桑基图)</option>
        <option value="http://127.0.0.1:8080/scatter">Scatter-(散点图)</option>
        <option value="http://127.0.0.1:8080/scatter3D">Scatter-(3D 散点图)</option>
        <option value="http://127.0.0.1:8080/surface3D">Surface3D-(3D 曲面图)</option>
        <option value="http://127.0.0.1:8080/themeRiver">ThemeRiver-(主题河流图)</option>
        <option value="http://127.0.0.1:8080/wordCloud">WordCloud-(词云图)</option>
        <option value="http://127.0.0.1:8080/page">Page-(顺序多图)</option>
    </select></div>

    
<div class="container">
    <div class="item" id="NcURZFVmOiPx"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_NcURZFVmOiPx = echarts.init(document.getElementById('NcURZFVmOiPx'), "white");
    let option_NcURZFVmOiPx = {
        title: {"text":"Map-示例图",},
        tooltip: {},
        legend: {},
        series: [
        {"name":"map","type":"map","map":"china","data":[{"name":"上海","value":87},{"name":"深圳","value":47},{"name":"青岛","value":31},{"name":"山西","value":18},{"name":"北京","value":131},{"name":"辽宁","value":59},{"name":"陕西","value":25},{"name":"乌鲁木齐","value":140},{"name":"齐齐哈尔","value":106}],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_NcURZFVmOiPx.setOption(option_NcURZFVmOiPx);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="xudeKaGlmXUb"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_xudeKaGlmXUb = echarts.init(document.getElementById('xudeKaGlmXUb'), "white");
    let option_xudeKaGlmXUb = {
        title: {"text":"Map-展示 Label",},
        tooltip: {},
        legend: {},
        series: [
        {"name":"map","type":"map","map":"china","data":[{"name":"上海","value":87},{"name":"深圳","value":47},{"name":"青岛","value":31},{"name":"山西","value":18},{"name":"北京","value":131},{"name":"辽宁","value":59},{"name":"陕西","value":25},{"name":"乌鲁木齐","value":140},{"name":"齐齐哈尔","value":106}],"label":{"show":true},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_xudeKaGlmXUb.setOption(option_xudeKaGlmXUb);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="vkpKTeBFwpaS"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_vkpKTeBFwpaS = echarts.init(document.getElementById('vkpKTeBFwpaS'), "white");
    let option_vkpKTeBFwpaS = {
        title: {"text":"Map-设置 VisualMap",},
        tooltip: {},
        legend: {},
        visualMap:[{"calculable":true,}],
        series: [
        {"name":"map","type":"map","map":"china","data":[{"name":"上海","value":87},{"name":"深圳","value":47},{"name":"青岛","value":31},{"name":"山西","value":18},{"name":"齐齐哈尔","value":106},{"name":"北京","value":131},{"name":"辽宁","value":59},{"name":"陕西","value":25},{"name":"乌鲁木齐","value":140}],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_vkpKTeBFwpaS.setOption(option_vkpKTeBFwpaS);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="nMfdDyHtMNMx"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_nMfdDyHtMNMx = echarts.init(document.getElementById('nMfdDyHtMNMx'), "white");
    let option_nMfdDyHtMNMx = {
        title: {"text":"Map-广东地图",},
        tooltip: {},
        legend: {},
        visualMap:[{"calculable":true,"inRange":{"color":["#50a3ba","#eac736","#d94e5d"]}}],
        series: [
        {"name":"map","type":"map","map":"广东","data":[{"name":"湛江市","value":61},{"name":"东莞市","value":89},{"name":"肇庆市","value":111},{"name":"深圳市","value":0},{"name":"广州市","value":44},{"name":"汕头市","value":12},{"name":"佛山市","value":28},{"name":"云浮市","value":74},{"name":"梅州市","value":95}],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_nMfdDyHtMNMx.setOption(option_nMfdDyHtMNMx);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="ukCGSXrqnxtI"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_ukCGSXrqnxtI = echarts.init(document.getElementById('ukCGSXrqnxtI'), "white");
    let option_ukCGSXrqnxtI = {
        title: {"text":"Map-汕头地图",},
        tooltip: {},
        legend: {},
        visualMap:[{"calculable":true,"inRange":{"color":["#50a3ba","#eac736","#d94e5d"]}}],
        series: [
        {"name":"map","type":"map","map":"汕头","data":[{"name":"潮南区","value":95},{"name":"南澳县","value":66},{"name":"澄海区","value":137},{"name":"潮阳区","value":56}],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_ukCGSXrqnxtI.setOption(option_ukCGSXrqnxtI);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="FNLszvexnQaa"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_FNLszvexnQaa = echarts.init(document.getElementById('FNLszvexnQaa'), "macarons");
    let option_FNLszvexnQaa = {
        title: {"text":"Map-设置风格",},
        tooltip: {},
        legend: {},
        visualMap:[{"calculable":true,"max":150,}],
        series: [
        {"name":"map","type":"map","map":"china","data":[{"name":"乌鲁木齐","value":140},{"name":"齐齐哈尔","value":106},{"name":"北京","value":131},{"name":"辽宁","value":59},{"name":"陕西","value":25},{"name":"山西","value":18},{"name":"上海","value":87},{"name":"深圳","value":47},{"name":"青岛","value":31}],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
    };
    myChart_FNLszvexnQaa.setOption(option_FNLszvexnQaa);
</script>

    <br/>
<style>
    .container {display: flex;justify-content: center;align-items: center;}
    .item {margin: auto;}
</style>
</body>
</html>
